<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgb(43, 52, 82);
            }
            .text {
                font-family: 'fangsong';
                display: inline-block;
                position: relative;
                font-size: 40px;
                height: 60px;
                line-height: 60px;
                color: rgb(245, 245, 245);
            }
            /* 制作文本最后的小光标 */
            .text::after {
                content: '';
                position: absolute;
                right: -10px;
                top: 5px;
                height: 50px;
                width: 3px;
                background-color: #fff;
                animation: san 0.5s steps(1) infinite;
            }
            @keyframes san {
                0%,
                100% {
                    background-color: #fff;
                }
                50% {
                    background-color: transparent;
                }
            }
        </style>
    </head>
    <body>
        <h1>
            <span class="text"></span>
        </h1>

        <script>
            // 获取.text标签
            const text = document.querySelector('.text');
            // 定义数组，里面放上文本
            const txt = ['北极光之夜。', '夜越黑，星星越亮。', '答案在风中飘荡。'];
            // 定义当前要显示的字符串的第几个字符
            var index = 0;
            // 定义文本数组的下标
            var xiaBiao = 0;
            // 定义huan，拿来判断是要实现打字还是删除字效果，初始为真
            var huan = true;
            // 定义一个定时器，200毫秒执行一次
            setInterval(function () {
                // huan为真
                if (huan) {
                    // 给.text标签添加字符，用.slice方法
                    text.innerHTML = txt[xiaBiao].slice(0, ++index);
                } else {
                    // 给.text标签删除字符，用.slice方法
                    text.innerHTML = txt[xiaBiao].slice(0, index--);
                }

                // 判断当前index是否为当前字符串长度了+3了 ，+3是为了打完后多等会，多走3个啥也不做的轮
                if (index == txt[xiaBiao].length + 3) {
                    // huan变为假，开始执行删除文字效果
                    huan = false;
                }
                // 如果删完了
                else if (index < 0) {
                    // index=0，huan为真，从头开始打字
                    index = 0;
                    huan = true;
                    // 数组下标加1
                    xiaBiao++;
                    if (xiaBiao >= txt.length) {
                        // 如果数组下标超过了，又回到0
                        xiaBiao = 0;
                    }
                }
            }, 200);
        </script>
    </body>
</html>
